<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改表单属性</title>
</head>
<body>
<h3>修改表单元素属性</h3>
<p>
    表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
</p>
<p>
    正常的有属性有取值的 跟其他的标签属性没有任何区别 <br>
    获取: DOM对象.属性名 <br>
    设置: DOM对象.属性名 = 新
</p>
<hr>
<p>
    表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移除了该属性
    <br>
    比如： disabled、checked、selected
</p>
<hr>

<label class="表单_文本框">
    <input type="text" placeholder="输入信息">
</label>
<br>
<hr>

<label class="表单_复选框">
    <input type="checkbox" name="" id="" checked="checked"> <!-- checked 是默认勾选复选框 -->
</label>

<div class="禁用按钮">
    <button disabled="disabled">点击</button> <!--这里的按钮添加了disabled,被禁用了-->
</div>


<script>
    // 获取元素
    const 表单_文本框 = document.querySelector('.表单_文本框 input')
    // 获取值  对象.属性名
    console.log(表单_文本框.value)  //输出控制台, 看信息. value没有设置所以没有任何信息, 注意没有报错就是没有信息
    console.log(表单_文本框.placeholder) //输出 "输入信息" ,这是placeholder设置好的信息

    console.log(表单_文本框.innerHTML)  // innerHTML 得不到表单的内容
    // 修改表单里的 值
    表单_文本框.placeholder = '我要电脑' // 页面看文本框里 信息是否修改


    console.log('----------------------------')
    // 获取元素
    const 表单_复选框 = document.querySelector('.表单_复选框 input')
    // 获取值  对象.属性名
    console.log(表单_复选框.checked)  //输出控制台, checked是检查 是否勾选复选框, 值是布尔值
    // 修改表单属性
    表单_复选框.checked = false // 这里修改表单复选框 的勾选状态
    /*额外说明:布尔值不要加引号, 引号是字符串了*/


    console.log('----------------------------')
    // 获取元素
    const 禁用按钮 = document.querySelector('.禁用按钮 button')
    // 获取值  对象.属性名
    console.log(禁用按钮.disabled)  //输出控制台, 按钮标签设置了 disabled 禁用按钮, 所以值是布尔值true
    // 修改按钮属性
    禁用按钮.disabled = false // 这里修改 按钮标签属性, disabled值设置false, 按钮变成不禁用状态
    /*额外说明:布尔值不要加引号, 引号是字符串了*/
</script>
</body>
</html>